<?php include(BASE_PATH . "/view/layout/layoutP.phtml"); ?>
<style>
._citys{width:375px;}
.userOrder{padding-top: 17px;}
 .userOrder .rewards {
    height: 70px;

}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    height: 0;
    clear: both;
    visibility: hidden;
}
.userOrder .rewards dl.rewards_1 {
    background-position: 6px 0;
}
.userOrder .rewards dl.rewards_2 {
    background-position: 6px -70px;
}
.userOrder .rewards dl.rewards_3 {
    background-position: 6px -140px;
}
.userOrder .rewards dl {
    width: 33.333%;
    height: 70px;
    float: left;
    background: url(/img/order/userOrder_icon.png) 0 0 no-repeat;
}
.userOrder .rewards dt {
    margin: 17px 0 0 90px;
}
.userOrder .rewards dd {
    margin-left: 90px;
    color: #999;
    font-size: 12px;
}
.center {
    width: 1000px;
    margin: 0 auto;
    margin-bottom: 17px;
}  
.orderForm{
    width: 1000px;
    margin:0 auto;
    border:1px solid #dcdcdc;
    border-bottom: none;
    height: 290px;
    
}
.fbg{background: url(/img/order/personalInformation_bg.png) center -47px no-repeat;}
.orderForm h2 {
    height: 62px;
    line-height: 65px;
    padding-left: 60px;
    background: url(/img/order/userOrder_icon.png) 0 0 no-repeat;
    font-size: 18px;
    color: #000;
    font-weight: normal;
}
.orderForm h2.sender {
    background-position: -9px -213px;
}
.orderForm h2.addressee {
    background-position: -9px -283px;
}
.orderForm h2.information {
    background-position: -9px -353px;
}
.orderForm h2.price{
   background-position: -9px -423px;
}
.orderForm .fl{width: 50%;}
.orderForm .fl dl {
    height: 50px;
    line-height: 50px;
}
.orderForm .fl dt {
    width: 130px;
    float: left;
    text-align: right;
    padding-right: 18px;
    clear: both;
}
.orderForm .fl dt>i {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    color: #ff233f;
    padding-right: 3px;
}
.orderForm .fl dd {
    width: 351px;
    float: left;
    position: relative;
    padding-top: 10px;
}
.orderForm input{
    padding-left: 10px;
    height: 30px;
    width: 268px;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
}
.userOrder .sfi{
    position: absolute;
    right: 90px;
    top: 12px;
    letter-spacing: 2px;
}
.cursor{cursor: pointer;}
.orderForm select{
    padding-left: 10px;
    height: 30px;
    width: 268px;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
}
.orderForm .no_i{height: 50px;padding-top: 15px;}
.sure{
    width: 1000px;
    margin:0 auto;
    border:1px solid #dcdcdc;
    height: 80px;
    padding-top: 10px;
    margin-bottom: 100px;
}
.sureCont{
    padding-left: 50px;
}
.sure input{
    width: 15px;
    height: 15px;
}
.sure span{
    position: relative;
    top: -3px;
}
.sure a{
    position: relative;
    top: -3px;
}
.commitBtn{
    width: 285px;
    height: 38px;
    margin-left: 300px;
    background-color: #e83535;
    border: 1px solid #e83535;
    background-image: -webkit-linear-gradient(top,#ed3f3f,#e83535);
    color: #fff;
    border-radius: 5px;
    letter-spacing: 3px;
}
.commitBtn:hover{
    background: #FE6262; background-image: -webkit-linear-gradient(top,#ff6868,#f95454);
}
.price_pr{
     font-size: 40px;
    color: #ea3a3a;
    padding-top: 44px;
    padding-left: 100px;
}
.beizhu{
    margin-top: 73px;
    margin-left: 42px;
}
.textarea {
    height: 40px;
    width: 268px;
    display: block;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    padding-left: 10px;
}
[v-cloak] {  display: none;}
</style>

<div class="userOrder">
    <div class="center">
        <div class="rewards clearfix">
            <dl class="rewards_1"><dt>消费积分奖励</dt><dd>消费1元积1分，累计积分兑好礼</dd></dl>
            <dl class="rewards_2"><dt>10倍积分奖励</dt><dd>电子运单寄件享5-10倍不等的积分奖励</dd></dl>
            <dl class="rewards_3"><dt>签到送积分奖励</dt><dd>每天签到，最高可领取14积分/天</dd></dl>
        </div>
    </div>
    <div class="orderForm fbg">
        <div class="fl">
             <h2 class="sender">寄件人信息</h2>
             <dl>
                <dt><i>*</i>姓名</dt>
                <dd>
                    <input id="rendName" class="inputH" type="text" name="name" placeholder="请输入寄件人姓名">
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>联系方式</dt>
                <dd>
                    <input id="rendTel" class="inputH" type="text" name="name" placeholder="请输入联系方式">
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>省市区</dt>
                <dd>
                    <input id="rendCity" class="cursor" type="text" name="name" placeholder="请输入省市区" readonly="readonly" value="<?php echo $data['yadress']?>">
                    <span class="sfi">...</span>
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>详细地址</dt>
                <dd>
                    <input id="rendAdress" class="inputH" type="text" name="name" placeholder="详细街道（精确到门牌号）">
                </dd>
            </dl>
        </div>
        <div class="fl">
            <h2 class="addressee">收件人信息</h2>
            <dl>
                <dt><i>*</i>姓名</dt>
                <dd>
                    <input id="signName" class="inputH" type="text" name="name" placeholder="请输入寄件人姓名">
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>联系方式</dt>
                <dd>
                    <input id="signTel" class="inputH" type="text" name="name" placeholder="请输入联系方式">
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>省市区</dt>
                <dd>
                    <input id="signCity" class="cursor" type="text" name="name" placeholder="请输入省市区" readonly="readonly" value="<?php echo $data['madress']?>">
                    <span class="sfi">...</span>
                </dd>
            </dl>
            <dl>
                <dt><i>*</i>详细地址</dt>
                <dd>
                    <input id="signAdress" class="inputH" type="text" name="name" placeholder="详细街道（精确到门牌号）">
                </dd>
            </dl>
        </div>
    </div>
    <div class="orderForm">
        <div class="fl">
             <h2 class="information">快件信息</h2>
             <dl>
                <dt><i>*</i>托寄物</dt>
                <dd>
                    <select id="goods">
                        <option>文件</option>
                        <option>衣服</option>
                        <option>食品</option>
                        <option>电子产品</option>
                        <option>其他</option>
                    </select>
                </dd>
            </dl>
            <dl>
                <dt class="no_i">重量</dt>
                <dd>
                    <select class="orderWeight" v-model="weight">
                        <option value="1">0-2kg</option>
                        <option value="2">2-5kg</option>
                        <option value="3">5-10kg</option>
                        <option value="4">10-20kg</option>
                        <option value="5">20kg以上</option>
                    </select>
                </dd>
            </dl>
            <dl>
                <dt class="no_i">数量</dt>
                <dd>
                    <input id="num" class="inputH" type="text" name="name" placeholder="请输入数量" value="1">
                </dd>
            </dl>
            <dl>
                <dt class="no_i">备注</dt>
                <dd>
                    <textarea class="textarea" data-parsley-maxlength="20" name="remark" id="remark" rows="3" placeholder="若您寄的物品虽不重但体积较大，请在这里注明。限20个字符以内。"></textarea>
                </dd>
            </dl>
         </div>
         <div class="fl">
             <h2 class="price">快件运费</h2>
             <div class="price_cont">
                <div class="price_pr">
                    <span>￥：</span>
                    <span v-cloak>{{price}}</span>
                    <span>元</span>
                </div>
                <p class="beizhu">备注：运费请参照价格表<a href="#">《快件运费价格表》</a></p>  
             </div>
         </div>
    </div>
    <div class="sure">
        <div class="sureCont">
            <input type="checkbox" name="sure">
            <span>我已同意</span>
            <a href="#">《快件运单契约条款》</a>
            <button class="commitBtn">提交</button>
        </div>
    </div>
</div>
<script>
$(function () {
    userOrder.init();
})

var userOrder = new Vue({
    el:".userOrder",
    data:{
        price:"12",
        weight:"1",
        status:"0"
    },
    methods:{
        init:function () {
            this.saveEvent();
            this.CityEvent();
            this.ChangePrice();
        },
        saveEvent:function(){
            $(".commitBtn").click(function(){
                $(".fbg input[class='inputH']").each(function () {
                    if ($(this).val() == "") {
                        popupalert('友情提示：带星号不能为空','notice',"");
                        userOrder.status = "0";
                        return;
                    }else{
                        userOrder.status = "1";
                    }
                })
                if(userOrder.status == 1){
                    var rendName = $("#rendName").val();
                    var rendTel = $("#rendTel").val();
                    var rendCity = $("#rendCity").val();
                    var rendAdress = $("#rendAdress").val();
                    var signName = $("#signName").val();
                    var signTel = $("#signTel").val();
                    var signCity = $("#signCity").val();
                    var signAdress = $("#signAdress").val();
                    var goods = $("#goods option:selected").html();
                    var orderWeight = $(".orderWeight option:selected").html();
                    var num = $("#num").val();
                    var textarea = $(".textarea").val();

                    $.ajax({
                        type:"POST",
                        url:"/application/order/oderSave",
                        datatype:"JSON",
                        data:{
                            "rendName":rendName,
                            "rendTel" :rendTel,
                            "rendCity":rendCity,
                            "rendAdress":rendAdress,
                            "signName":signName,
                            "signTel":signTel,
                            "signCity":signCity,
                            "signAdress":signAdress,
                            "goods":goods,
                            "orderWeight":orderWeight,
                            "num":num,
                            "textarea":textarea
                        },
                        success:function(ret){
                            ret = JSON.parse(ret);
                            if(ret.result == 0){
                                var callback =function(){
                                    window.location.reload();
                                }
                                popupalert("寄件成功！","message",callback)
                            }
                        },
                        error:function(e){
                            var callback =function(){
                                window.location.reload();
                            }
                            popupalert("注册失败！","error",callback)
                        }
                    })
                }
                 
            })
        },
        CityEvent:function () {
            $(".cursor").click(function (e) {
                SelCity(this,e);
            });
        },
        ChangePrice:function () {
            $(".orderWeight").change(function () {
                if(userOrder.weight >= 2){
                    userOrder.price = Math.round(userOrder.weight * 0.8 * 12);
                }else {
                    userOrder.price = 12;
                }
            })
            $("#num").change(function(){
                var num = $("#num").val();
                userOrder.price = Math.round(userOrder.price * (num * 0.6));
            })

        }
    },
})



</script>
<?php include(BASE_PATH . "/view/layout/footer.phtml"); ?>
